<template>
  <div id='sortingQuery' class='auto' style="display: inline">
    <button type="button" class="btn btn-primary" @click='isshow()'>精确查询</button>
    <modal :show.sync="show" v-ref:modal large backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="close"><span>&times;</span></button>
        <h4 class="modal-title">查询条件</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class='over'>
          <criteria v-ref:search @condition-changed='showCondition'>
            <div novalidate class="form-inline" partial>
              {{$parent.queryGroup}}{{$parent.queryGroup.includes('用户')}}
              <!-- 用户类： -->
              <div class="form-group" v-if="$parent.queryGroup.includes('用户')">
                <label>用户编号:</label>
                <input  type="text" class="form-control" v-model="model.f_userinfoid" placeholder='用户编号'
                condition="f_userinfoid = '{}'">
                <label>小区:</label>
                <input  type="text" class="form-control" v-model="model.f_districtname" placeholder='用户编号'
                condition="f_districtname = '{}'">
                <label>气表编号:</label>
                <input  type="text" class="form-control" v-model="model.f_userid" placeholder='用户编号'
                condition="f_userid = '{}'">
                 <label>开户日期:</label>
                <datepicker id="f_watchinstalldate" placeholder="表安装日期"
                  v-model="model.f_dateofopening"
                  :value.sync="model.f_dateofopening"
                  :format="'yyyy-MM-dd'"
                  condition="f_dateofopening = '{}'"
                  width="140px">
                </datepicker>
                <label>地址:</label>
                <input  type="text" class="form-control" v-model="model.f_address" placeholder='用户编号'
                condition="f_address = '{}'">
              </div>
              <!-- IC卡类 -->
              <div class="form-group">
                <label>卡号:</label>
                <input  type="text" class="form-control" v-model="model.f_cardid" placeholder='用户编号'
                condition="f_cardid = '{}'">
              </div>
              <!-- 收费类 -->
              <div class="form-group">
                <label>用户类型:</label>
                <v-select id="f_paytype"
                v-model="model.f_usertype"
                placeholder='请选择收费类型'
                :value.sync="model.f_usertype"
                :options='usertypes'
                condition="f_usertype = '{}'"
                close-on-select ></v-select>

                <label>是否有效：</label>
                <v-select id="f_paytype"
                v-model="model.f_paytype"
                placeholder='请选择收费类型'
                :value.sync="model.f_paytype"
                :options='paytype'
                condition="f_usertype = '{}'"
                close-on-select ></v-select>

                <label>收费类型：</label>
                <v-select id="f_paytype"
                v-model="model.f_payfeetype"
                placeholder='请选择收费类型'
                :value.sync="model.f_payfeetype"
                :options='payfeetypes'
                condition="f_payfeetype = '{}'"
                close-on-select ></v-select>

                <label>付款方式：</label>
                <v-select id="f_payment"
                v-model="model.f_payment"
                placeholder='请选择收费类型'
                :value.sync="model.f_payment"
                :options='payments'
                condition="f_payment = '{}'"
                close-on-select ></v-select>
                <label>收费时间从</label>
                <datepicker id="f_watchinstalldate" placeholder="表安装日期"
                  v-model="model.f_dateofopening"
                  :value.sync="model.f_dateofopening"
                  :format="'yyyy-MM-dd'"
                  condition="f_dateofopening = '{}'"
                  width="140px"></datepicker>
                  -
                <datepicker id="f_watchinstalldate" placeholder="表安装日期"
                  v-model="model.f_dateofopening"
                  :value.sync="model.f_dateofopening"
                  :format="'yyyy-MM-dd'"
                  condition="f_dateofopening = '{}'"
                  width="140px"></datepicker>
              </div>
              <!-- 气表类 -->
              <div class="form-group">
                <label>气表品牌：</label>
                <v-select id="f_paytype"
                v-model="model.f_payfeetype"
                placeholder='请选择收费类型'
                :value.sync="model.f_payfeetype"
                :options='payfeetypes'
                condition="f_payfeetype = '{}'"
                close-on-select ></v-select>
                <label>气表型号：</label>
                <v-select id="f_paytype"
                v-model="model.f_payfeetype"
                placeholder='请选择收费类型'
                :value.sync="model.f_payfeetype"
                :options='payfeetypes'
                condition="f_payfeetype = '{}'"
                close-on-select ></v-select>
                <label>气表类型：</label>
                <v-select id="f_paytype"
                v-model="model.f_payfeetype"
                placeholder='请选择收费类型'
                :value.sync="model.f_payfeetype"
                :options='payfeetypes'
                condition="f_payfeetype = '{}'"
                close-on-select ></v-select>
              </div>
              <!-- 操作类 -->
              <div class="form-group">
                <label>操作员:</label>
                <input  type="text" class="form-control" v-model="model.f_cardid" placeholder='用户编号'
                condition="f_cardid = '{}'">
                <label>公司类型:</label>
                <input  type="text" class="form-control" v-model="model.f_cardid" placeholder='用户编号'
                condition="f_cardid = '{}'">
                <label>营业网点:</label>
                <input  type="text" class="form-control" v-model="model.f_cardid" placeholder='用户编号'
                condition="f_cardid = '{}'">
              </div>
              <!-- 抄表类 -->
              <div class="form-group">
                <label>抄表状态：</label>
                <v-select id="f_paytype"
                v-model="model.f_payfeetype"
                placeholder='请选择收费类型'
                :value.sync="model.f_payfeetype"
                :options='payfeetypes'
                condition="f_payfeetype = '{}'"
                close-on-select ></v-select>
                <label>是否缴费：</label>
                <v-select id="f_paytype"
                v-model="model.f_payfeetype"
                placeholder='请选择收费类型'
                :value.sync="model.f_payfeetype"
                :options='payfeetypes'
                condition="f_payfeetype = '{}'"
                close-on-select ></v-select>
                <label>抄表员：</label>
                <v-select id="f_paytype"
                v-model="model.f_payfeetype"
                placeholder='请选择收费类型'
                :value.sync="model.f_payfeetype"
                :options='payfeetypes'
                condition="f_payfeetype = '{}'"
                close-on-select ></v-select>
                <label>录入员：</label>
                <v-select id="f_paytype"
                v-model="model.f_payfeetype"
                placeholder='请选择收费类型'
                :value.sync="model.f_payfeetype"
                :options='payfeetypes'
                condition="f_payfeetype = '{}'"
                close-on-select ></v-select>
                <label>抄表日期从</label>
                <datepicker id="f_watchinstalldate" placeholder="表安装日期"
                  v-model="model.f_dateofopening"
                  :value.sync="model.f_dateofopening"
                  :format="'yyyy-MM-dd'"
                  condition="f_dateofopening = '{}'"
                  width="140px"></datepicker>
                  -
                <datepicker id="f_watchinstalldate" placeholder="表安装日期"
                  v-model="model.f_dateofopening"
                  :value.sync="model.f_dateofopening"
                  :format="'yyyy-MM-dd'"
                  condition="f_dateofopening = '{}'"
                  width="140px"></datepicker>
                <label>录入日期从</label>
                <datepicker id="f_watchinstalldate" placeholder="表安装日期"
                  v-model="model.f_dateofopening"
                  :value.sync="model.f_dateofopening"
                  :format="'yyyy-MM-dd'"
                  condition="f_dateofopening = '{}'"
                  width="140px"></datepicker>
                  -
                <datepicker id="f_watchinstalldate" placeholder="表安装日期"
                  v-model="model.f_dateofopening"
                  :value.sync="model.f_dateofopening"
                  :format="'yyyy-MM-dd'"
                  condition="f_dateofopening = '{}'"
                  width="140px"></datepicker>
              </div>
              <!-- 票据补打类 -->
              <div class="form-group">
                <label>补打时间从</label>
                <datepicker id="f_watchinstalldate" placeholder="表安装日期"
                  v-model="model.f_dateofopening"
                  :value.sync="model.f_dateofopening"
                  :format="'yyyy-MM-dd'"
                  condition="f_dateofopening = '{}'"
                  width="140px"></datepicker>
                  -
                <datepicker id="f_watchinstalldate" placeholder="表安装日期"
                  v-model="model.f_dateofopening"
                  :value.sync="model.f_dateofopening"
                  :format="'yyyy-MM-dd'"
                  condition="f_dateofopening = '{}'"
                  width="140px"></datepicker>
              </div>
              <!-- 换表类 -->
              <div class="form-group">
                <label>换表时间从</label>
                <datepicker id="f_watchinstalldate" placeholder="表安装日期"
                  v-model="model.f_dateofopening"
                  :value.sync="model.f_dateofopening"
                  :format="'yyyy-MM-dd'"
                  condition="f_dateofopening = '{}'"
                  width="140px"></datepicker>
                  -
                <datepicker id="f_watchinstalldate" placeholder="表安装日期"
                  v-model="model.f_dateofopening"
                  :value.sync="model.f_dateofopening"
                  :format="'yyyy-MM-dd'"
                  condition="f_dateofopening = '{}'"
                  width="140px"></datepicker>
              </div>
              <!-- 补气类 -->
              <div class="form-group">
                <label>补气类型：</label>
                <v-select id="f_paytype"
                v-model="model.f_payfeetype"
                placeholder='请选择收费类型'
                :value.sync="model.f_payfeetype"
                :options='payfeetypes'
                condition="f_payfeetype = '{}'"
                close-on-select ></v-select>
              </div>

          </div>
          </criteria>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button v-show="show" type="button" class="btn btn-default" @click='close'>取消</button>
        <button v-show="show" type="button" class="btn btn-success" @click='$refs.search.search(), clear($refs.search.model)'>确认</button>
      </footer>
    </modal>

  </div>
</template>

<script>
export default {

  title: '精确查询',
  data () {
    return {
      condition: '1=1',
      show: false
    }
  },
  props: {
    model: {
      type: Object,
      default: Object
    },
    queryGroup: {
      type: Array,
      default: []
    }
  },
  methods: {
    showCondition () {
      this.model.search(this.$refs.search.condition)
      this.close()
    },
    isshow () {
      this.show = !this.show
    },
    close () {
      this.show = false
    },
    clear (model) {
      let keys = Object.keys(model)
      keys.forEach((key) => {
        model[key] = ''
      })
    }
  }
}
</script>
